import React, { Component } from 'react';
import { DatePicker, Checkbox, Row, Col, Tag } from 'antd';
import moment from 'moment';
import 'moment/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';

interface MonthsSelectProps {
  value?: any[];
  defaultValue?: any[];
  onChange?: (value: any[]) => void;
}

interface MonthsSelectState {
  options: any[];
  seletYear: string;
  currentMonth: any[]; //当前年份选择的月
  seletMonth: any[]; //最终选择的月
}

const Marr = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];

class MonthsSelect extends Component<MonthsSelectProps, MonthsSelectState> {
  constructor(props: MonthsSelectProps) {
    super(props);

    this.state = {
      options: [],
      seletYear: '',
      currentMonth: [],
      seletMonth: [],
    };
  }

  onDateChange = (_: any, dateString: string) => {
    this._init(dateString);
  };

  onBoxChange = (checkedValues: any[]) => {
    const { onChange } = this.props;
    const { seletMonth } = this.state;
    let sm = [...seletMonth, ...checkedValues];
    sm = [...new Set(sm)];
    this.setState({
      currentMonth: checkedValues,
      seletMonth: sm,
    });
    if (onChange) {
      onChange(sm);
    }
  };

  onCloseTime = (value: any) => {
    const { currentMonth, seletMonth } = this.state;
    const { onChange } = this.props;

    const cmCopy = [...currentMonth];
    const smCopy = [...seletMonth];
    const ci = currentMonth.findIndex((ele) => ele === value);
    const si = seletMonth.findIndex((ele) => ele === value);

    if (ci > -1 && si > -1) {
      cmCopy.splice(ci, 1);
      smCopy.splice(si, 1);
      this.setState({
        currentMonth: cmCopy,
        seletMonth: smCopy,
      });
      if (onChange) {
        onChange(smCopy);
      }
    } else if (si > -1) {
      smCopy.splice(si, 1);
      this.setState({
        seletMonth: smCopy,
      });
      if (onChange) {
        onChange(smCopy);
      }
    }
  };

  _init = (year: string) => {
    const _opt: any[] = [];
    Marr.map((item, index) => {
      _opt.push({ label: index + 1 + '月', value: year + '-' + item });
    });
    this.setState({
      seletYear: year,
      options: _opt,
      currentMonth: [],
    });
  };

  componentDidMount() {
    this._init(moment().format('YYYY'));
  }

  render() {
    const { currentMonth, seletMonth, options } = this.state;

    return (
      <div>
        <DatePicker
          onChange={this.onDateChange}
          style={{ width: '50%', marginBottom: '5px' }}
          defaultValue={moment()}
          format={'YYYY'}
          picker="year"
          locale={locale}
        />
        {options.length > 0 && (
          <Checkbox.Group
            options={options}
            value={seletMonth}
            onChange={this.onBoxChange}
          />
        )}
        {seletMonth.length > 0 && (
          <div style={{ marginTop: 5 }}>
            <span style={{ marginRight: 8 }}>已选择:</span>
            {seletMonth.map((tag) => (
              <Tag key={tag} color={'#40a9ff'} closable onClose={() => this.onCloseTime(tag)}>
                {tag}
              </Tag>
            ))}
          </div>
        )}
      </div>
    );
  }
}

export default MonthsSelect;
